<template>
  <div v-show="show">
    <div class="mask"></div>
    <div class="full" v-if="isShowfullplayer">
      <div class="head">
        <i class="iconfont" @click="fadeBack">&#xe669;</i>
        <div class="title ell">
          <span>{{ player.list[player.index].name }}</span> -
          <span class="art"
          v-for="item in player.list[player.index].ar"
          :key="item.id">{{item.name}}</span>
        </div>
      </div>
      <!-- cd -->
      <div class="inner-box">
        <div class="great" :style="{transform: isPause? '': 'rotate(-15deg)'}"></div>
        <div class="circle-bg" :style="{animationPlayState: isPause? 'running' : 'paused'}">
          <div class="img-box">
            <img :src="player.list[player.index].al.picUrl" alt="">
          </div>
        </div>
      </div>
        <!-- 歌词位置 -->
      <div class="lrc" ref="lrcwrapper">
        <div>
          <div class="line">
            <p
            :style="{color:currentLineNum === index ? 'red' : ''}"
            ref="lines"
              v-for="(item, index) in currentLyric.lines"
              :key="index"
            >{{item.txt}}</p>
          </div>
        </div>
      </div>
      <!-- icon -->
      <div class="icon">
        <i class="iconfont icon-zan1"></i>
        <i class="iconfont icon-xiazai"></i>
        <i class="iconfont icon-caidan"></i>
      </div>
      <!-- 进度条 -->
      <div class="line-box">
        <span class="start">{{curTime}}</span>
        <div class="bar-bg">
          <div class="bar-line" :style='{width: audioinit.progress}'></div> <!-- 已经播放的长度 -->
          <div class="bar-point" :style="{left: audioinit.progress}"></div> <!-- 播放的圆点 -->
        </div>
        <span class="end">{{endTime}}</span>
      </div>
      <!-- 控制播放暂停 -->
      <div class="cont-icon">
        <div class="icons"><i class="iconfont icon-weimingmingwenjianjia_xunhuan"></i></div>
        <div class="icons"><i class="iconfont icon-zuojiantou" @click="preSong"></i></div>
        <div class="icons"><i class="iconfont" :class="{'icon-pause': isPause, 'icon-bofang': !isPause}" @click="pause"></i></div>
        <div class="icons"><i class="iconfont icon-youjiantou" @click="nextSong"></i></div>
        <div class="icons"><i class="iconfont icon-gedan" @click="showList"></i></div>
      </div>
      <!-- 点击歌单列表的内容 -->
      <el-drawer
        :visible.sync='drawer'
        :direction='direction'
        :modal-append-to-body='false'
        :show-close='false'
        :withHeader='false'
        :size='"50%"'
        >
        <div class="dirp">
          <header>歌曲列表</header>
          <div class="inner" ref="inner">
            <ul class="drawer-list">
              <li class="list-item ell"
              v-for="(item, index) in player.list" :key="index"
              @click="changeSong(index, item.id)"
              >
                <span class="name">{{item.name}}</span>
                -
                <span class="art"
                v-for="val in item.ar" :key="val.id"
                >{{val.name}}</span>
              </li>
            </ul>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import Lyric from 'lyric-parser'
import { mapState } from 'vuex'
import bus from '@/bus.js'
export default {
  name: 'fullPlay',
  data () {
    return {
      show: false,
      timer: null,
      drawer: false, // 歌单列表
      direction: 'btt',
      obj: {
        animationPlayState: 'running'
      },
      isPause: true,
      lrc: null,
      currentLyric: {
        lines: null
      },
      currentLineNum: 0
    }
  },
  methods: {
    preSong () {
      clearTimeout(this.timer)
      this.isPause = true
      const that = this
      this.timer = setTimeout(() => {
        let index = that.$store.state.player.index - 1 // 下一首歌的索引
        if (index < 0) {
          index = that.$store.state.player.list.length - 1 // 最后首歌索引
        }
        const info = that.player.list[index]
        console.log(info)
        const id = info.id
        that.changeSong(index, id)
        that.timer = null
      })
    },
    nextSong () { // 函数防抖，函
      clearTimeout(this.timer)
      this.isPause = true
      const that = this
      this.timer = setTimeout(function () {
        let index = that.$store.state.player.index + 1 // 下一首歌的索引
        if (index > that.$store.state.player.list.length - 1) {
          index = 0 // 第一首歌索引
        }
        const info = that.player.list[index]
        console.log(info)
        const id = info.id
        that.changeSong(index, id)
        that.timer = null
      }, 500)
    },
    changeSong (index, id) { // 点击抽屉歌曲切换
      const that = this
      this.$store.dispatch('getUrl', { that, id }) // 获取点击歌曲的MP3
      this.$store.commit('fullplay', { index }) // 点击获取歌曲信息的
      this.lrc = null
      this.currentLyric.stop()
      this.currentLineNum = 0
      this.playingLyric = null
      this.getLyc() // 获取当前歌曲歌词
    },
    showList () { // 显示隐藏歌单
      this.drawer = true
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.inner, {
          click: true
        })
      })
    },
    fadeBack () { // 点击左箭头后，让全屏播放器消失，让mini播放器出现
      this.show = false
      this.$store.commit('changeisShow')
      const img = this.player.list[this.player.index].al.picUrl
      const name = this.player.list[this.player.index].name
      const lyc = this.playingLyric
      bus.$emit('miniData', { img, name, lyc })
    },
    pause () { // 控制播放暂停的
      this.isPause = !this.isPause
      this.currentLyric.togglePlay() // 切换歌词播放状态
      this.obj.animationPlayState === 'running' ? this.obj.animationPlayState = 'paused' : this.obj.animationPlayState = 'running'
      bus.$emit('pause', this.isPause)
    },
    getLyc () {
      const that = this
      this.axios.get('/api/lyric?id=' + this.player.list[this.player.index].id).then((res) => {
        console.log(res.data.lrc.lyric)
        if (res.data.code === 200) {
          this.lrc = res.data.lrc.lyric
          this.currentLyric = new Lyric(that.lrc, that.handleLyric) // this.handleLyric回调函数
          this.scroll = new BScroll(this.$refs.lrcwrapper, {})
          this.currentLyric.play() // 设置玩歌词信息后，播放歌词
        }
      })
    },
    handleLyric ({ lineNum, txt }) {
      this.currentLineNum = lineNum
      if (lineNum > 1) {
        const lineEl = this.$refs.lines[lineNum - 1]
        this.scroll.scrollToElement(lineEl, 300)// 滚动到元素
      } else {
        this.scroll.scrollTo(0, 0, 1000)// 滚动到顶部
      }
      this.playingLyric = txt
    }
  },
  mounted () {
    bus.$on('end', () => {
      this.nextSong() // 自动播放下一首音乐
    })
    bus.$on('show', () => {
      this.show = true
    })
  },
  watch: {
    isShowfullplayer (newData, oldData) {
      console.log(newData, oldData)
      if (newData) {
        this.show = true
        // const index = this.player.index
        if (this.lrc === null) {
          this.getLyc()
        }
      }
    }
  },
  computed: {
    ...mapState({
      player: 'player',
      audioinit: 'audioinit',
      isShowfullplayer: 'isShowfullplayer'
    }),
    endTime () { // 结束时间
      const time = parseInt(this.audioinit.duration) // 221s
      let m = parseInt(time / 60) // 得到min
      if (m < 10) {
        m = '0' + m
      }
      let s = time % 60 // 得到秒数
      if (s < 10) {
        s = '0' + s
      }
      return `${m}:${s}` // 03:41
    },
    curTime () { // 开始时间
      const time = parseInt(this.audioinit.currenttime) // 221s
      let m = parseInt(time / 60) // 得到min
      if (m < 10) {
        m = '0' + m
      }
      let s = time % 60 // 得到秒数
      if (s < 10) {
        s = '0' + s
      }
      return `${m}:${s}` // 03:41
    }
  }
}
</script>
<style lang="stylus" scoped>
.dirp
  padding 0 .3rem
  .inner
    position absolute
    top .7rem
    bottom 0
    overflow hidden
  .list-item
    height .5rem
    line-height .5rem
.lrc
  height 1.2rem
  position absolute
  left 5%
  right 5%
  overflow hidden
  text-align center
  margin-top -.8rem
  color white
  p
    line-height .4rem
.ell
  overflow hidden
  white-space nowrap
  text-overflow:ellipsis;
.art:after
  content "/"
  margin 0 0.1rem
.art:last-child:after
  content ""
.cont-icon
  display flex
  margin-top .6rem
  .icons
    flex 1
    text-align center
    .iconfont
      font-size .5rem
      color #bdc3c7
.line-box
  margin .2rem 0
  display flex
  justify-content space-between
  .bar-bg
    flex 1
    background #95a5a6
    height 2px
    margin-top .2rem
    position relative
    .bar-line
      width 20%
      background #ecf0f1
      height 2px
    .bar-point
      left 20%
      width 8px
      height 8px
      border-radius 50%
      background #ecf0f1
      margin-top -3px
    .bar-line,.bar-point
      position absolute
  span
    text-align center
    width 1rem
    color #fff
.inner-box
  height 7.6rem
  margin 0.6rem 0
  position relative
  overflow hidden
.rotate
  transform translate(-50%) rotate(-16deg)
.great
  position absolute
  z-index 1
  left: 50%
  transform-origin top left
  transition transform 0.2s
  width 2rem
  height 0
  padding-bottom 2.5rem
  background-image url(https://icon.qiantucdn.com/20200509/cad9247361c2677cb1287c6fd8f866c92)
  background-size 100% 100%
  background-repeat no-repeat
.circle-bg
  display flex
  justify-content center
  margin 1.2rem auto
  width 6rem
  height 0
  padding-bottom 6rem
  background-image url(https://icon.qiantucdn.com/20200509/55828113a162610d404cf3a52c1344492)
  background-size 100% 100%
  background-repeat no-repeat
  animation rotating 24s linear infinite
  transform-origin center
.img-box
  border 1px solid #000
  width 4rem
  height 4rem
  border-radius 50%
  margin-top 1rem
  overflow hidden
  img
    width 100%
    height 100%
.icon
  display flex
  justify-content: space-around
  align-items center
  margin-top 1.2rem
.icon i
  font-size 0.5rem
  color #bdc3c7
.head
  display flex
  line-height 1rem
  color #fff
  .iconfont
    font-size .4rem
    margin-right .2rem
.full
  padding 0 .3rem
  position fixed
  z-index 100
  top 0
  right 0
  left 0
  bottom 0
  background #7f8c8d
.mask
  position fixed
  top 0
  right 0
  left 0
  bottom 0
  background rgba(0,0,0,.7)
</style>
